//
// Docs sections
// --------------------------------------------------


.docs-container {
  margin-top: -50px;
}
// Space things out
.docs-section {
  margin-bottom: 40px;
}
.docs-section:last-child {
  margin-bottom: 0;
}


/**
 * Add a width to docs-headings inside section-content,
 * so we easily get the .anchor when hovering over headings.
 *
 * **Example**:
 *
 * ```html
 * <div class="docs-section">
 *   <div class="section-content">
 *     <h3 class="docs-heading"></h3>
 *   </div>
 * </div>
 * ```
 */

.section-content .docs-heading {
  max-width: 80%;
  margin-top: 20px;
}



/**
 * Remove the width on major headings, so we don't cause them to wrap.
 * This class is probably unnecessary, but we'll do it for insurance.
 *
 * **Example**:
 *
 * ```html
 * <div class="docs-section">
 *   <div class="page-heading">
 *     <h3 class="docs-heading"></h3>
 *   </div>
 * </div>
 * ```
 */

.page-heading .docs-heading {
  max-width: auto;
}



h1[id] {
  margin-top: 0;
}

// Make headings stand out more, give some space
.docs-section {
  h1:first-child {
    margin-top: 40px;
  }

  font-family: @font-family-sans-serif;
  p {
    font-size: @font-size-large - 3;
    line-height: 1.5;
    margin: 10px 0 20px;
  }

  // Override normal paragraph styles inside blockquotes
  // this needs to be extra specific
  blockquote {
    position: relative;
    font-style: normal;
    font-weight: 500;
    color: inherit;
    margin: 0;
    border-left-style: none;
    padding: 0;
    > p {
      line-height: 1.5;
      color: inherit;
      padding: 0px;
      &:first-child {
        font-size: 18px;
      }
    }
  }
  
  td {
    @g: 10px;
    padding: 0 @g (@g / 2) 0;
    vertical-align: top;
    min-width: 150px;
  }
  
  img {
    max-width: 100%;
  }
}


// individual section of content, usually represented
// by h2, h3 etc.
.section-content {
  position: relative; // we need to set position relative for popovers
}

